<template>
    <div class="contbox">
        <div class="title">
            <span class="ns">{{ title }}</span>
            <div>
                <el-button type="primary" size="mini">上周</el-button><el-button type="primary" plain size="mini">本周</el-button><el-button type="primary" plain size="mini">下周</el-button><el-date-picker placeholder="选择时间" type="year" :clearable="false" size="mini" style="width:120px;margin-left: 10px;"
                                value-format="yyyy" format="yyyy年">
                </el-date-picker>
            </div>
        </div>
        <div style="display: flex;">
            <div style="width: 200px;">
                <expenseTaskPie text="100%"></expenseTaskPie>
            </div>
            <div class="rightbox">
                <span class="ns">分类对比</span>
                <expenseTaskBar></expenseTaskBar>
            </div>
        </div>
    </div>
</template>

<script>
  import expenseTaskPie from './expenseTaskPie.vue'
  import expenseTaskBar from './expenseTaskBar.vue'

  export default {
    props: {
      title: String
    },
    components: { expenseTaskPie, expenseTaskBar }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.contbox {
    flex: 1;
    height: 240px;
    padding: 10px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 20px;
    .title {
        display: flex;
        justify-content: space-between;
    }
    .ns {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        text-align: LEFT;
        color: #333;
        line-height: 30px;
        margin-left: 15px;
    }
    .rightbox {
        width: 520px;
        height: 180px;
        margin-top: 10px;
        background: linear-gradient(90deg, #f5f6f8, #ffffff 100%);
        border-radius: 8px;
        .ns {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Light;
            font-weight: 300;
            text-align: LEFT;
            color: #333;
            line-height: 50px;
        }

    }
}
</style>
